<template>
  <div class="card-left">
    <div v-if="name" class="left-head">{{ name.substring(name.length - 2) }}</div>
    <img v-if="!name" class="left-head" src="@/assets/appraise/icon/appraise_bumen.png"/>
    <span class="f-s-20 f-w-700 m-l-10">{{ content }}</span>
    <span v-if="time" class="head-year">{{ time }}</span>
  </div>
</template>

<script>
export default {
  name: 'ModuleHeader',
  props: {
    name: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    },
  },
  watch: {

  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>

<style scoped>
.card-left {
  display: flex;
  align-items: center;
}

.left-head {
  user-select: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:18px;
  color: #FFFFFF;
  border-radius: 0.2rem;
  background-image: linear-gradient(180deg,rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
  box-shadow: 0 0.2rem 0.3rem 0 rgba(209,209,209,0.5);
}
.head-year {
  user-select: none;
  font-size: 18px;
  margin-left: 0.35rem;
  color: rgba(102, 102, 102, 1);
  padding: 0.05rem 0.2rem;
  background-color: rgba(239, 239, 243, 1);
  border-radius: 0.2rem;
}
.f-s-20 {
  user-select: none;
  font-size: 20px;
}
.f-w-700 {
  font-weight: 400;
}
.m-l-10 {
  margin-left: 0.5rem;
}
@media (max-width: 1024px) {
  .left-head {
    user-select: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:16px;
    color: #FFFFFF;
    border-radius: 0.2rem;
    background-image: linear-gradient(180deg,rgba(241, 188, 87, 1), rgba(249, 172, 121, 1));
    box-shadow: 0 0.2rem 0.3rem 0 rgba(209,209,209,0.5);
  }
  .head-year {
    user-select: none;
    font-size: 16px;
    margin-left: 0.35rem;
    color: rgba(102, 102, 102, 1);
    padding: 0.05rem 0.2rem;
    background-color: rgba(239, 239, 243, 1);
    border-radius: 0.2rem;
  }
  .f-s-20 {
    user-select: none;
    font-size: 18px;
  }
}
</style>
